<template>
 <h1 class="test">hello vue3</h1>
 {{$store.state.user.profile}}
 <button @click="btn">改id</button>
 <XtxSkeleton/>
</template>

<script>
import { useStore } from 'vuex'
import XtxSkeleton from '@/components/Skeleton'
export default {
  components: {
    XtxSkeleton
  },
  name: 'Home',
  setup () {
    const store = useStore()
    console.log(store.state.user.profile.nickname)
    const btn = () => {
      store.commit('user/setUserId', 304)
    }
    return { btn }
  }
}
</script>

<style lang="less" scoped>
// 引入我们定义了less变化的文件
// ~线不能丢
// @import "~@/styles/variables.less";
.test {
  color: @xtxColor;
}
</style>
